* {
  box-sizing: border-box;
  font-family: '微軟正黑體';
}
body {
  background: url('../images/bg.jpg') no-repeat center top;
}
.bgc {
  background: url('../images/head_bg.png') no-repeat;
  background-size: 100% 100%;
}
.div__border {
  background: linear-gradient(0deg, skyblue, transparent 5% 95%, skyblue) no-repeat, linear-gradient(0deg, skyblue, transparent 5% 95%, skyblue) no-repeat, linear-gradient(90deg, skyblue, transparent 5% 95%, skyblue) no-repeat, linear-gradient(90deg, skyblue, transparent 5% 95%, skyblue) no-repeat, url('../images/line(1).png'), rgba(255, 255, 255, 0.03);
  background-size: 0.1vw 100%, 0.1vw 100%, 100% 0.1vw, 100% 0.1vw;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
}
.map {
  background: url('../images/line(1).png'), rgba(255, 255, 255, 0.03);
}
.map__border--left {
  background: linear-gradient(0deg, transparent 0 90%, skyblue 90% 100%) no-repeat, linear-gradient(90deg, skyblue 0 5%, transparent 5% 100%) no-repeat, linear-gradient(0deg, transparent 0 20%, white 10% 80%, transparent 80% 100%) no-repeat;
  background-size: 0.1vw 100%, 100% 0.1vw, 0.05vw 100%;
  background-position: 0 0, 0 0, 100% 0;
}
.map__border--right {
  background: linear-gradient(0deg, skyblue 0 10%, transparent 10% 100%) no-repeat, linear-gradient(90deg, transparent 0 95%, skyblue 95% 100%) no-repeat;
  background-size: 0.1vw 100%, 100% 0.1vw;
  background-position: 100% 0, 0 100%;
}
.map__bg--1 {
  background: url('../images/map.png') no-repeat center;
  background-size: 70% 85%;
  opacity: 0.4;
}
